<template>
  <a-layout class="list beauty-scroll">
    <a-layout-header class="list-header">
      <a-breadcrumb style="margin-top: 26px">
        <a-breadcrumb-item>
          <a href="#/home"><a-icon type="database"/></a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <a-icon :type="type.icon" />
          <span>{{type.title}}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </a-layout-header>
    <a-layout-content class="list-content">
      <a-list :grid='{ gutter:24,xl:4,lg:3,md:3,sm:2,xs:1 }' style="margin: 0 -8px">
        <a-list-item v-for="(item,index) in data" :key="index" style="padding: 0 8px">
          <router-link :to="'/home/list/'+$route.params.type+'/'+item.id">
            <a-card :loading="loading" type="inner" hoverable>
              <img slot="cover" :src="item.src" height="154"/>
              <a-card-meta :title="item.title">
                <div class="text-hide" slot="description">{{item.author}}</div>
              </a-card-meta>
              <div class="content">
                <span>{{item.time}}</span>
                <span style="text-align:end;"><a-icon type="eye" style="margin-right:6px;"/>{{item.viewer}}</span>
              </div>
            </a-card>
          </router-link>
        </a-list-item>
      </a-list>
      
      <div style="padding: 60px 0;text-align:center;">
        <a-pagination
          show-quick-jumper
          :default-current="page"
          :total="500"
          show-less-items
          @change="pageChange"
        />
      </div>
    </a-layout-content>

  </a-layout>
</template>
<script>
import { lists } from '@/services/dataSource';
import {types} from './types'
export default {
  name: 'list',
  data () {
    return {
      type: '',
      data:Array(12).fill({}),
      loading: false,
      page: 1,
    }
  },
  mounted () {
    this.type = types[this.$route.params.type];
    this.getList();
  },
  methods: {
    pageChange(){
      this.getList();
    },
    getList(page=1){
      this.loading = true;
      lists({page}).then(res=>{
        if(res.data.code==200){
          this.data = res.data.data
        }
      })
      setTimeout(()=>{
        this.loading = false
      },800)
    }
  }
}
</script>
<style lang="less" scoped>
  .list{
    overflow-x: hidden;
    overflow-y: scroll;
    .list-header{
      background-color: @base-bg-color;
    }
    /deep/.ant-card-type-inner .ant-card-body{
      padding: 16px;
    }
    .list-content{
      padding: 30px;
      background-color: @base-bg-color;
      .content{
        display: flex;
        margin-top: 16px;
        margin-bottom: -4px;
        line-height: 20px;
        height: 20px;
        & > span {
          color: @text-color-second;
          flex: 1;
          font-size: 12px;
        }
      }
    }
  }
  .text-hide{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>